<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" top="8vh" width="1000px" :close-on-click-modal="false" @closed="resetForm('form')">
			<div>
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="标题" prop="title">
								<el-input v-model.trim="form.title" maxlength="30" show-word-limit></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="$route.meta.type == 1">
							<el-form-item label="作者" prop="author">
								<el-input v-model.trim="form.author"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="$route.meta.type == 1">
							<el-form-item label="发布时间" prop="pudDate">
								<el-date-picker
									v-model="form.pudDate"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="$route.meta.type == 1">
							<el-form-item label="排序">
								<el-input-number v-model="form.orderBy" :min="1" :max="1000" size="medium" label="排序"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="24" v-if="[1, 5].indexOf($route.meta.type) !== -1">
							<el-form-item label="附件">
								<UploadFile v-if="dialogVisible" multiple @e-fileData="saveFile" />
								<NoticeFile v-if="form.hasOwnProperty('id')" :noticeId="form.id" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="内容" prop="content">
								<UEditor ref="ueditor" :ueHeight="400" :ueWidth="880" :defaultMsg="form.content" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="custom" v-preventReClick @click="submitForm('form')">提 交</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment';
import { sysNoticeAdd, sysNoticeUpdate, sysNoticeFilesAdd } from '@/api/admin/system/sysNotice.js';
import Bus from '@/utils/bus.js';
export default {
	components: {
		UploadFile: () => import('@/components/uploadFile/index.vue'),
		NoticeFile: () => import('./NoticeFile.vue')
	},
	data() {
		return {
			title: '新增',
			dialogVisible: false,
			addOrEdit: 1,
			checkedData: {},
			form: {
				title: '',
				content: '',
				author: '',
				pudDate: '',
				orderBy: '10',
				isShow: 0,
				type: '', //消息类型：1-通知公告；2-通知私信：3-关于我们 4联系我们 5培训资源
				sysNoticeFilesList: []
			},
			rules: {
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
				author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
				pudDate: [{ required: true, message: '请选择发布时间', trigger: 'blur' }]
			}
		};
	},
	watch: {
		$route: {
			immediate: true,
			handler(v) {
				this.form.type = v.meta.type;
			}
		}
	},
	mounted() {
		Bus.$on('showDialogNoticeAdd', (v) => {
			if (v) {
				this.checkedData = v;
				this.handleAddOrEdit(2);
			} else {
				this.handleAddOrEdit(1);
			}
		});
	},
	beforeDestroy() {
		Bus.$off('showDialogNoticeAdd');
	},
	methods: {
		saveFile(v) {
			this.form.sysNoticeFilesList = [];
			v.forEach((item) => {
				this.form.sysNoticeFilesList.push({ fileId: item.id });
			});
		},
		//显示弹窗
		handleAddOrEdit(type) {
			if (type == 2) {
				this.title = '编辑';
				for (let i in this.checkedData) {
					if (this.form.hasOwnProperty(i)) {
						this.form[i] = this.checkedData[i] || '';
					}
				}
				this.form.id = this.checkedData.id;
			} else {
				this.title = '新增';
				this.form = this.$options.data().form;
				this.form.author = this.$store.getters.username;
				this.form.pudDate = new Date();
				delete this.form.id;
			}
			this.addOrEdit = type;
			this.dialogVisible = true;
		},
		submitForm(form) {
			this.form.type = this.$route.meta.type;
			if (this.form.type == 3 || this.form.type == 4) {
				this.form.pudDate = new Date();
			}
			this.form.pudDate = moment(this.form.pudDate).format('YYYY-MM-DD HH:mm:ss');
			this.form.content = this.$refs.ueditor.message;
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.addOrEdit == 1 ? this.add() : this.edit();
				}
			});
		},
		//新增
		add() {
			sysNoticeAdd(this.form).then((res) => {
				this.dialogVisible = false;
				Bus.$emit('refreshNoticeList');
				this.$message({
					message: '操作成功',
					type: 'success'
				});
			});
		},
		//编辑
		edit() {
			if (this.form.sysNoticeFilesList.length && !this.form.sysNoticeFilesList[0].hasOwnProperty('id')) {
				this.form.sysNoticeFilesList.forEach((v) => {
					this.uploadNoticeFile(v.fileId);
				});
			}
			sysNoticeUpdate(this.form).then((res) => {
				this.dialogVisible = false;
				Bus.$emit('refreshNoticeList');
				this.$message({
					message: '操作成功',
					type: 'success'
				});
			});
		},
		//附件上传
		uploadNoticeFile(fileId) {
			let form = {
				noticeType: this.form.type,
				noticeId: this.form.id,
				fileId
			};
			sysNoticeFilesAdd(form).then((res) => {
				// console.log(res);
			});
		},
		//重置表单
		resetForm(form) {
			this.$refs[form].resetFields();
		}
	}
};
</script>
